<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit:contain" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
		<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-active {
				color:#ef4870 !important;
			}
			
		</style>
	</head>
	<body>
		<nav id='nav' class="mui-bar mui-bar-tab">
		    <a id="homepage" class="mui-tab-item mui-active">
		        <span class="mui-icon iconfont icon-home"></span>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a id="art" class="mui-tab-item">
		        <span class="mui-icon iconfont icon-course"></span>
		        <span class="mui-tab-label">我的历程</span>
		    </a>
		    <a id='inform' class="mui-tab-item">
		        <span class="mui-icon iconfont icon-notice"></span>
		        <span class="mui-tab-label">通知中心</span>
		    </a>
		    <a id='userinfo' class="mui-tab-item">
		        <span class="mui-icon iconfont icon-my"></span>
		        <span class="mui-tab-label">个人中心</span>
		        
		    </a>
		</nav>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/cache.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/resize.js" type="text/javascript" charset="utf-8"></script>
		<script>
			(function($, doc) {
				let subpages= app.getSubPages();
				$.init();
				let screenInfo = cache.getScreenInfo();
				if(screenInfo.height == 812 & screenInfo.width == 375){
					//如果是iphoneX设备则对导航栏设置底部margin
					document.getElementById('nav').setAttribute('style','margin-bottom: 34px;')
				}
				$.plusReady(function() {
					//子页面加载
					var aniShow = {};
					var self = plus.webview.currentWebview();
					var activeTab = subpages[0].id;
				    for (var i = 0; i < subpages.length; i++) {
				        var temp = {};
				        var sub = plus.webview.create(subpages[i].url,subpages[i].id,subpages[i].styles,subpages[i].extras);
				        if (i > 0) {
				            sub.hide();
				        }else{
				            temp[subpages[i].id] = "true";
				            mui.extend(aniShow,temp);
				        }
				        self.append(sub);
				    }
				    
				    mui('.mui-bar-tab').on('tap', 'a', function(e) {
				        var targetTab = this.getAttribute('id');
				        if (targetTab == activeTab) {
				            return;
				        }
				        //显示目标选项卡
				        //若为iOS平台或非首次显示，则直接显示
				        if(mui.os.ios||aniShow[targetTab]){
				            plus.webview.show(targetTab);
				        }else{
				            //否则，使用fade-in动画，且保存变量
				            var temp = {};
				            temp[targetTab] = "true";
				            mui.extend(aniShow,temp);
				            plus.webview.show(targetTab,"fade-in",300);
				        }
				        //隐藏当前;
				        plus.webview.hide(activeTab);
				        //更改当前活跃的选项卡
				        activeTab = targetTab;
				    });
				    
					//--
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 2000);
						return false;
					};
				});
			}(mui, document));
		</script>
	</body>
</html>